<template>
  <el-container style="height:100%;border:1px solid #eee">
    <el-aside width="25%" style="border-right:1px solid #eee">
      <el-row
        style="background:#f6f6f6;position: fixed; width: 24.5%;z-index: 99;"
      >
        <div class="k-tree-toolbar-header" style="padding:5px;">
          <span class="k-icon k-i-excel" style="margin:5px;float: right;cursor: pointer;" title="导出Excel" @click="handlerExport()" />
          <!-- <span class="k-icon k-i-edit" style="margin:5px;float: right;cursor: pointer;" title="修改" @click="handlerEdit()" /> -->
          <span class="k-icon k-i-plus-outline" style="margin:5px;float: right;cursor: pointer;" title="新增需求任务" @click="addFp('add')" />
        </div>
      </el-row>
      <KendoTreeCmpt
        ref="ReqmntFpDetailTree"
        style="margin-top:20px"
        :component-options="componentOptions"
        :data-source-options="dataSourceOptions"
      />
      <KendoWindow
        :dialog-title="dialogTitle"
        :components-list="componentsList"
        :operate-dialog-view="operateDialogView"
        @beforeClose="beforeClose"
      />
    </el-aside>
    <el-container style="padding-left:5px">
      <el-main>
        <div v-if="optCmptView">
          <component :is="getComponent" v-for="(item,index) in list" :key="index" :data="item" />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import requireMixins from '@/Mixins/requireMixins.js'
  import { Button } from '@progress/kendo-buttons-vue-wrapper'
  export default {
    name: 'RequirementFpDetailMng',
    components: {
      'k-button': Button
    },
    mixins: [requireMixins],
    data: function() {
      return {
        dialogName: this.uid(),
        list: [],
        optCmptView: false,

        // 当前功能明细数据对应的需求任务数据
        reqmentData: {},
        /* tree-start*/
        treeDataItem: {},
        /* tree-end*/
        /* window-start*/
        dialogTitle: '',
        componentsList: [],
        operateDialogView: false,
        /* window-end*/
        componentOptions: {
          id: 'filetree',
          ref: 'filetree',
          data: {
            fieldName: 'name'
          },
          event: {
            onSelect: this.onSelect,
            onExpand: this.onExpand,
            onCollapse: this.onCollapse
          }
        },
        dataSourceOptions: {
          ref: 'fpTreeDataSource',
          transport: {
            readUrl: '/service/prjMng/reqmntFpDetail/findReqMntFpTree',
            readDataType: 'json'
          },
          shcema: {
            model: {
              id: 'code',
              hasChildren: 'hasChildren'
            },
            data: function(response) {
              if (typeof response.data === 'object') {
                if (JSON.stringify(response.data) === '{}') {
                  return []
                }
              }
              return response.data
            }
          },
          parameterMap: {
            code: this.$attrs.data.param.reqNo
          }
        },
        expandNodes: []
      }
    },
    created() {
      this.$bus.on('multildialog' + this.dialogName, (resData) => {
        if (resData) {
          this.beforeClose(resData)
        }
      })
    },
    mounted() {
      this.forms = this.fileforms
      this.expandNodes = []
      this.reqmentData = Object.assign(this.reqmentData, this.$attrs.data.param)
    },
    methods: {
      handlerOptCmpt(data) {
        const component = {
          component: '/projmng/requirementtaskmng/fpdetail/edit.vue',
          param: data,
          operatorType: 'edit'
        }
        this.$nextTick(() => {
          this.optCmptView = true
          this.list.push(component)
        })
      },
      addFp(operatorType) {
        const item = Object.assign({}, this.deepCopy(this.treeDataItem))
        if (Object.keys(item).length > 0) {
          const component = {
            component: '/projmng/requirementtaskmng/fpdetail/add.vue',
            dialogName: this.dialogName,
            param: Object.assign({ rootFlag: false }, this.deepCopy(this.treeDataItem)),
            operatorType: operatorType
          }
          this.operateDialogView = true
          this.dialogTitle = '新增需求任务功能明细'
          this.componentsList.push(component)
        } else {
          this.$kendoConfirm({
            title: '提示消息',
            message: '未选择目标节点！是否继续创建任务？',
            btn: [
              {
                type: 'submit',
                text: '确定'
              },
              {
                type: 'cancel',
                text: '取消'
              }
            ]
          }).then(_ => {
            // 获取当前
            const component = {
              component: '/projmng/requirementtaskmng/fpdetail/add.vue',
              dialogName: this.dialogName,
              param: Object.assign({ rootFlag: true }, this.deepCopy(this.reqmentData)),
              operatorType: operatorType
            }
            this.operateDialogView = true
            this.dialogTitle = '新增需求任务功能明细'
            this.componentsList.push(component)
          }).catch(_ => {

          })
        }
      },
      handlerEdit() {
        const item = Object.assign({}, this.deepCopy(this.treeDataItem))
        if (Object.keys(item).length > 0) {
          if (item.nodeType === '1') {
            this.addTcc('edit')
          } else {
            this.addTestCase('edit')
          }
        }
      },
      handlerExport() {
        const { reqNo, reqName } = this.$attrs.data.param
        this.$exportpost('/service/prjMng/reqmntFpDetail/exportReqMntFpDetail', { reqNo }, 'blob').then(res => {
          if (!res) {
            return
          }
          if (window.navigator.msSaveBlob) { // IE以及IE内核的浏览器
            try {
              window.navigator.msSaveBlob(res, 'test.xlsx') // res为接口返回数据，这里请求的时候已经处理了，如果没处理需要在此之前自行处理
              // window.navigator.msSaveOrOpenBlob(res, fileName);  //此方法类似上面的方法，区别可自行百度
            } catch (e) {
              console.log(e)
            }
          } else {
            const url = window.URL.createObjectURL(new Blob([res.data]))
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', reqName + '需求计划明细.xlsx')// 文件名
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) // 下载完成移除元素
            window.URL.revokeObjectURL(url) // 释放掉blob对象
          }
        })
      },
      onSelect(ev) {
        const { reqNo } = this.$attrs.data.param
        this.optCmptView = false
        this.list = []
        const _this = ev.sender
        const node = ev.node
        const dataItem = _this.dataItem(node)
        this.$set(dataItem, 'reqNo', reqNo)
        this.treeDataItem = Object.assign({}, dataItem)
        this.handlerOptCmpt(this.treeDataItem)
      },
      onExpand(ev) {
        debugger
        const _this = ev.sender
        const node = ev.node
        const dataItem = _this.dataItem(node)
        const expandNodes = this.expandNodes
        if (expandNodes) {
          if (expandNodes.length > 0) {
            const newNode = expandNodes.filter(s => s === dataItem.code)
            if (newNode.length <= 0) {
              expandNodes.push(dataItem.code)
            }
          } else {
            expandNodes.push(dataItem.code)
          }
        }
        this.expandNodes = expandNodes
        this.$set(this.dataSourceOptions.parameterMap, 'expandNodes', this.expandNodes)
      },
      onCollapse(ev) {
        debugger
        const _this = ev.sender
        const node = ev.node
        const dataItem = _this.dataItem(node)
        const expandNodes = this.expandNodes
        if (expandNodes) {
          if (expandNodes.length > 0) {
            const index = expandNodes.map(s => s).indexOf(dataItem.code)
            if (index >= 0) {
              expandNodes.splice(index, 1)
            }
          }
        }
      },
      ReqmntFpDetailTreeRead() {
        debugger
        this.$set(this.dataSourceOptions, 'parameterMap', { code: this.$attrs.data.param.reqNo })
        this.$set(this.dataSourceOptions.parameterMap, 'expandNodes', this.expandNodes)
        this.$refs['ReqmntFpDetailTree'].transportReadTree()
      },
      beforeClose(res) {
        if (res) {
          this.dialogTitle = ''
          this.operateDialogView = false
          this.componentsList = []
          this.treeDataItem = {}
          this.ReqmntFpDetailTreeRead()
        }
      }
    }

  }
</script>

<style>
    #treeview .k-sprite {
        background-image: url("~@/Images/coloricons-sprite.png");
    }
    .rootfolder { background-position: 0 0; }
    .folder     { background-position: 0 -16px; }
    .pdf        { background-position: 0 -32px; }
    .html       { background-position: 0 -48px; }
    .image      { background-position: 0 -64px; }

    .k-grid-toolbar-header>button:not(:first-child){
    margin-left: 10px;
  }
</style>
